<template>
  <div class="app-list-container" v-loading="loading">
    <div class="app-left">
      <div class="search-box">
        <el-button type="primary" @click="handleClick">申请权限</el-button>
        <el-input
          v-model="searchParams.search"
          placeholder="请输入系统名称或简介搜索"
          class="search"
          clearable
          @keyup.enter.native="handleUpdateData"
        >
          <template #append>
            <el-button :icon="Search" @click="handleUpdateData" />
          </template>
        </el-input>
      </div>
      <div class="app_list">
        <el-row :gutter="35">
          <el-col
            :span="8"
            v-for="(item, index) in appList"
            :key="index"
            @click="handleAppList(item)"
          >
            <systemCard
              :data="item"
              @updateData="handleUpdateData"
              v-model:loading="loading"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="app-right">
      <collectCard
        :data="collectAppList"
        v-model:loading="loading"
        @updateData="handleUpdateData"
        @handleAppList="handleAppList"
      />
    </div>
  </div>
</template>

<script setup>
import { getAppByDepartmentList, getCollectList } from '@/api/navList';
import { Search } from '@element-plus/icons-vue';
import systemCard from './components/system-card';
import collectCard from './components/collect-card';
const ddPermUrl = ref(
  'dingtalk://dingtalkclient/action/openapp?app_id=-4&container_type=work_platform&corpid=ding3d99cda18de6e0d035c2f4657eb6378f&ddtab=true&redirect_type=jump&redirect_url=https%3A%2F%2Faflow.dingtalk.com%2Fdingtalk%2Fmobile%2Fhomepage.htm%3Fback_control%3Dfalse%26backcontrol%3Dfalse%26corpid%3Dding3d99cda18de6e0d035c2f4657eb6378f%26dd_progress%3Dfalse%26dd_share%3Dfalse%26ddtab%3Dtrue%26showmenu%3Dfalse%23%2Fcustom%3Fpcredirect%3Dself%26processCode%3DPROC-9497A337-5C7A-481B-B8E0-5247C1A20F12'
);
const loading = ref(false);
const searchParams = reactive({
  search: ''
});
const appList = ref([]);
const collectAppList = ref([]);
// 获取可看见的系统
const getTableData = () => {
  loading.value = true;
  getAppByDepartmentList(searchParams)
    .then(res => {
      appList.value = res.data.app_list;
      loading.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
};
// 获取收藏得系统
const navigateCollect = () => {
  getCollectList()
    .then(res => {
      collectAppList.value = res.data.app_list;
    })
    .finally(() => {});
};
const handleUpdateData = type => {
  getTableData();
  navigateCollect();
};
const handleClick = () => {
  window.open(ddPermUrl.value, '_self');
};
// 点击跳转对应系统
const handleAppList = item => {
  let iframeURL = item.app_url;
  iframeURL = iframeURL.trim();
  let frameOrigin = iframeURL.match(/^http.*\.(com|cn|net)/g);
  if (frameOrigin) frameOrigin = frameOrigin[0];
  let key = getRandomNum(10000, 99999);
  iframeURL += `#?key=${key}&from_=${window.btoa(window.location.origin)}`;
  window.open(iframeURL, '_blank');
};
const getRandomNum = (Min, Max) => {
  let Range = Max - Min;
  let Rand = Math.random();
  return Min + Math.round(Rand * Range); //四舍五入
};
onMounted(() => {
  getTableData();
  navigateCollect();
});
</script>

<style lang="scss" scoped>
.app-list-container {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 50px);
  padding: 10px 12px;
  .app-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    .search-box {
      padding: 18px 18px 0;
      display: flex;
      justify-content: space-between;
      background: #fff;
      margin-bottom: 10px;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      .search {
        max-width: 400px;
        margin-bottom: 20px;
        text-align: right;
      }
    }
    .app_list {
      box-sizing: border-box;
      padding: 18px 18px 0;
      flex: 1;
      background: #fff;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      overflow: auto;
    }
  }
  .app-right {
    height: 100%;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    width: 360px;
    margin-left: 10px;
    padding: 18px;
    overflow: auto;
  }
}
</style>
